<script setup>


import useTheme from "../../util/useTheme.js";
import {ref} from "vue";

const {theme, toggleTheme} = useTheme();

const themeValue = ref(theme.value === "dark");
</script>

<template>
  <div class="v-theme-container">
    <div>{{ theme }}主题切换</div>
    <div>
      <el-switch
          v-model="themeValue"
          inline-prompt
          active-text="暗"
          inactive-text="亮"
          @change="toggleTheme"/>
    </div>
    <div style="font-size: 40px;">
      {{ theme === 'dark' ? '暗色' : '亮色' }}主题
    </div>
  </div>
</template>

<style scoped>
/**
使用CSS变量
 */
.v-theme-container {
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: var(--text-color);
  background: var(--bg-color);
}
</style>